<template>
	<view>
		<!-- 从底部弹出 -->
		<uni-popup ref="po" type="bottom" background-color="#fff">
			<!-- <view style="border-radius: 30rpx;"> -->
			<!-- <view class="popup-content_2" :class="{ 'popup-height': type === 'left' || type === 'right' }"> -->
			<view class="popup_top">
				<view style="margin-top: 0rpx;">
					<view class="order_quit" style="float: right; margin: 0rpx 40rpx; margin-top: 40rpx;">
						<view @tap="Customer_close('bottom')" style="margin-left: 30rpx;">
							<uni-icons type="closeempty" size="20"></uni-icons>
						</view>
					</view>
					<view style="background: #FFFFFF;border-radius: 28rpx;padding:20rpx;margin:0 20rpx 36rpx;">
						<view
							style="font-size: 30rpx;font-weight: bold;text-align: center;margin-left: 100rpx;margin-top: 30rpx;">
							填写您的个人信息</view>
						<view style="margin-top: 40rpx;">
							<view class="flexJusp"
								style="width: 622rpx;height: 44rpx;background: #F6F6F6;border-radius: 12rpx;padding:20rpx 24rpx;margin:20rpx 0;">
								<view style="font-size:26rpx;">卡号</view>
								<input v-model="bankid" style="text-align: right;font-size: 26rpx;"
									placeholder="请输入卡号" />
							</view>
							<view class="flexJusp"
								style="width: 622rpx;height: 44rpx;background: #F6F6F6;border-radius: 12rpx;padding:20rpx 24rpx;margin:20rpx 0;">
								<view style="font-size:26rpx;">开户行</view>
								<input v-model="bank" style="text-align: right;font-size: 26rpx;"
									placeholder="请输入开户行" />
							</view>

							<view class="flexJusp"
								style="width: 622rpx;height: 44rpx;background: #F6F6F6;border-radius: 12rpx;padding:20rpx 24rpx;">
								<view style="font-size:26rpx;">持卡人姓名</view>
								<input v-model="name" style="text-align: right;font-size: 26rpx;"
									placeholder="请输入持卡人姓名" />
							</view>
							<view class="flexJusp"
								style="width: 622rpx;height: 44rpx;background: #F6F6F6;border-radius: 12rpx;padding:20rpx 24rpx;margin:20rpx 0 0;">
								<view style="font-size:26rpx;">持卡人手机号</view>
								<input v-model="phone" maxlength="11" type="number"
									style="text-align: right;font-size: 26rpx;" placeholder="请输入持卡人手机号" />
							</view>
						</view>

					</view>
					<view class="empty_Confirm">
						<view class="button1" @tap="Customer_close('bottom')">取消</view>
						<view class="button2" @tap="addCard">确认</view>
					</view>
				</view>
				<!-- </view>
				<!-- </view> -->
			</view>

		</uni-popup>
		<view v-for="(item,index) in arr" :key="index">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options2" :show="isOpened" :auto-close="false" @change="change"
					@click="bindClick($event, index)">
					<view :style="{'background-color':item.backgroundColor}" class="aa">
						<view class="box" @tap="Selected(item)">
							<view>
								<view class="name_kh">
									<view class="name">{{item.bank}}</view>
									<view class="kh">{{item.bankid}}</view>
								</view>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

		</view>

		<button @click="Customer('bottom')" class="addCard">添加其他银行卡</button>
	</view>

	</view>
</template>

<script>
	const cityData = require('./yingh.json')
	export default {
		data() {
			return {
				cityData: cityData.banks,
				backgroundColor: '#319C8B',
				userInputCardNum: '',
				arr: [],
				bank: '', //开户行
				bankid: '', //卡号
				name: '', // 姓名
				phone: '', //手机号
				show: false,
				isOpened: 'none',
				options2: [{
						text: '取消',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '确认',
						style: {
							backgroundColor: '#F56C6C'
						}
					}
				],
			};
		},
		onLoad() {
			this.getCard()
		},
		methods: {
			addCard() {
				if (this.bank == '') return this.$utils.showtt('请输入开户行')
				if (this.bankid == '') return this.$utils.showtt('请输入卡号')
				if (!this.$utils.cardNumber.test(this.bankid)) return this.$utils.showtt('银行卡号格式不正确')
				if (this.name == '') return this.$utils.showtt('请输入联系人')
				if (this.phone == '') return this.$utils.showtt('请输入联系电话')
				if (!this.$utils.isMobile.test(this.phone)) return this.$utils.showtt('联系电话格式不正确')
				let cityData = []
				this.cityData.forEach((item) => {
					cityData.push(item.name)
				})
				// js检查数组中是否包含某 银行卡
				if (cityData.indexOf(this.bank) == -1) {
					uni.showToast({
						title: '请输入其他的银行卡号',
						icon: 'none'
					})
					return
				}
				let data = {
					bank: this.bank,
					bankid: this.bankid,
					name: this.name,
					phone: this.phone,
				}
				this.$httpapi('addCard', 'POST', data).then(res => {
					this.getCard()
				})
				// 关闭
				this.$refs.po.close()
			},
			// 查询卡号接口
			getCard() {
				this.$httpapi('getCardList', 'POST', {}).then(res => {
					this.arr = res.data
					this.arr.forEach(item => {
						item.backgroundColor = '';
						for (let i = 0; i < this.cityData.length; i++) {

						}
					});
					// 给卡号 加间距（每四位数）
					for (let i = 0; i < this.arr.length; i++) {
						this.arr[i].bankid = this.arr[i].bankid.replace(/\s/g, '').
						replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
					}
					for (let i = 0; i < this.cityData.length; i++) {
						for (let j = 0; j < this.arr.length; j++) {
							if (this.cityData[i].name == this.arr[j].bank) {
								this.arr[j].backgroundColor = this.cityData[i].backgroundColor
							}
						}
					}
				})
			},
			change(e) {
				// this.isOpened = e;
			},
			bindClick(e, index) {
				if (e.content.text === '确认') {
					//删除
					this.$httpapi('deleteCard', 'POST', {
						id: this.arr[index].id
					}).then(res => {
						this.getCard()
					})
				} else {

				}
			},
			// 打开
			Customer() {
				this.$refs.po.open()
			},
			// 关闭
			Customer_close() {
				this.$refs.po.close()
			},
			Selected(item) {
				uni.$emit("updateNum", item)
				uni.navigateBack({
					url: '/pages_user/user/wallet/Withdrawal'
				})
			}

		}
	}
</script>

<style lang="scss">
	.uni-popup .uni-popup__wrapper {
		display: block;
		position: relative;
		border-radius: 30rpx;
		margin-top: -50rpx;
	}

	.aa {
		position: relative;
		width: 95%;
		height: 200rpx;
		margin: auto;
		border-radius: 25rpx;

		.box {
			margin-top: 40rpx;

			.name_kh {
				color: #fff;
				font-weight: bold;
				padding: 43rpx 50rpx;

				.name {
					font-size: 40rpx;
					color: #FFFFFF;
				}

				.kh {
					font-size: 32rpx;
					line-height: 90rpx;
					color: #FFFFFF;
				}
			}

		}
	}

	.addCard {
		margin: auto;
		text-align: center;
		width: 710rpx;
		height: 88rpx;
		background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
		border-radius: 44rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		position: absolute;
		bottom: 60rpx;
		left: 20rpx;
	}

	.popup-content_2 {}

	.popup_top {
		height: 770rpx;
		position: relative;
		border-radius: 10rpx;

		.empty_Confirm {
			display: flex;
			justify-content: space-around;
			font-weight: 700;
			font-size: 25rpx !important;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			margin-top: 45rpx;
			position: absolute;
			bottom: 60rpx;

			.button1 {
				width: 320rpx;
				border: 1px solid #c7c7c7;
				border-radius: 10rpx;
				margin-left: 40rpx;
			}

			.button2 {
				width: 320rpx;
				background-color: #16aaf3;
				color: #fff;
				border-radius: 10rpx;
				margin-left: 30rpx;
			}
		}
	}
</style>
